<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>校园答疑助手 - 登录</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#4361ee', // 主色调：校园蓝
            secondary: '#3f37c9',
            accent: '#4895ef',
            light: '#f8f9fa',
            dark: '#212529'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .bg-gradient-campus {
        background: linear-gradient(135deg, #4361ee 0%, #4895ef 100%);
      }
      .card-shadow {
        box-shadow: 0 10px 25px -5px rgba(67, 97, 238, 0.1), 0 8px 10px -6px rgba(67, 97, 238, 0.1);
      }
      .input-focus {
        @apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none;
      }
    }
  </style>
</head>
<body class="bg-gray-50 min-h-screen flex items-center justify-center p-4">
  <!-- 登录卡片 -->
  <div class="w-full max-w-md">
    <div class="bg-white rounded-2xl card-shadow overflow-hidden transform transition-all duration-300 hover:scale-[1.01]">
      <!-- 顶部装饰条 -->
      <div class="h-2 bg-gradient-campus"></div>
      
      <!-- 登录内容 -->
      <div class="p-8">
        <!-- 标题区域 -->
        <div class="text-center mb-8">
          <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 mb-4">
            <i class="fa fa-comments text-2xl text-primary"></i>
          </div>
          <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark">校园答疑助手</h1>
          <p class="text-gray-500 mt-2">连接师生，高效解决学习难题</p>
        </div>

        <!-- 登录表单 -->
        <form>
          <!-- 角色选择 -->
          <div class="mb-6">
            <label class="block text-gray-700 font-medium mb-2">身份选择</label>
            <div class="flex gap-4">
              <label class="flex items-center flex-1 p-3 border-2 border-gray-200 rounded-lg cursor-pointer transition-all hover:border-primary/30 peer-checked:border-primary peer-checked:bg-primary/5">
                <input type="radio" name="role" value="student" class="sr-only peer" checked>
                <i class="fa fa-user-circle text-xl text-primary mr-2"></i>
                <span>学生</span>
              </label>
              <label class="flex items-center flex-1 p-3 border-2 border-gray-200 rounded-lg cursor-pointer transition-all hover:border-primary/30 peer-checked:border-primary peer-checked:bg-primary/5">
                <input type="radio" name="role" value="teacher" class="sr-only peer">
                <i class="fa fa-graduation-cap text-xl text-primary mr-2"></i>
                <span>教师</span>
              </label>
            </div>
          </div>

          <!-- 用户名 -->
          <div class="mb-4">
            <label for="username" class="block text-gray-700 font-medium mb-2">学号/工号</label>
            <div class="relative">
              <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                <i class="fa fa-id-card"></i>
              </span>
              <input type="text" id="username" placeholder="请输入学号或工号" 
                class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus transition-all">
            </div>
          </div>

          <!-- 密码 -->
          <div class="mb-6">
            <label for="password" class="block text-gray-700 font-medium mb-2">密码</label>
            <div class="relative">
              <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                <i class="fa fa-lock"></i>
              </span>
              <input type="password" id="password" placeholder="请输入密码" 
                class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg input-focus transition-all">
              <button type="button" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-primary">
                <i class="fa fa-eye-slash"></i>
              </button>
            </div>
          </div>

          <!-- 登录按钮 -->
          <button type="submit" class="w-full bg-primary hover:bg-secondary text-white font-medium py-3 px-4 rounded-lg transition-all duration-300 transform hover:translate-y-[-2px] flex items-center justify-center">
            <span>登录</span>
            <i class="fa fa-arrow-right ml-2"></i>
          </button>
        </form>

        <!-- 底部链接 -->
        <div class="mt-6 text-center text-gray-500 text-sm">
          <a href="#" class="hover:text-primary transition-colors">忘记密码？</a>
          <span class="mx-2">|</span>
          <a href="#" class="hover:text-primary transition-colors">首次使用指南</a>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <p class="text-center text-gray-400 text-sm mt-6">© 2023 校园答疑助手 - 软件工程课程设计</p>
  </div>

  <script>
    // 密码显示/隐藏切换
    document.querySelector('.fa-eye-slash').parentElement.addEventListener('click', function() {
      const icon = this.querySelector('i');
      const input = document.getElementById('password');
      if (input.type === 'password') {
        input.type = 'text';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
      } else {
        input.type = 'password';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
      }
    });
  </script>
</body>
</html>